<script setup>
import { reactive } from 'vue';

// import { onMounted } from 'vue';

const Note = window.Note

const notes = Note.getNotesWithImgs()
// const BucketURL = window.BucketURL

// const masonryDom = ref(null)

// onMounted(() => {
//   console.log(masonryDom.value)
//   console.log(masonryDom.value.clientWidth)
//   console.log(masonryDom.value.getElementsByTagName("div"))




// })

</script>

<template>
  <div class="container" v-scope="Container()">
    <div class="column" v-for="column in columns">
      <div class="item" v-for="image in column">
        <img :src="image" :alt="image" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.Waterfall {
  width: 960px;
  margin: 0 auto;




  .wf-item {
    img {
      height: 100%;
      width: 100%;
    }
  }
}


















// .column .item {
//   margin: 4px 8px;
//   flex: auto;
// }

// .column {
//   display: flex;
//   flex-wrap: wrap;
//   flex-direction: row;
//   align-content: flex-start;
//   flex: 1;
// }

// .container {
//   display: flex;
// }








// .masonry {
//   // height: ;
//   border: 1px solid red;

//   .item {
//     width: 100%;

//     img {
//       width: 100%;
//       max-height: 500px;
//       object-fit: cover;
//     }
//   }
// }


// ====================================================

// .imgs {
//   // border: 1px solid red;
//   display: inline-block;
//   max-width: 100%;
//   white-space: nowrap;
//   overflow-x: auto;

//   img {
//     border: 1px solid var(--model-border-color);
//     border-radius: 5px;
//     object-fit: cover;
//     height: 100px;
//     width: 100px;
//     margin-right: 5px;
//   }
// }
</style>